<template>
  <div id="content" :style="{height:contentHeight+'px'}">
    <Row  type="flex"  justify="space-between"  :style="{height:contentHeight-30+'px'}" class="code-row-bg">
      <Col class="board-item" span="12">
        <Row  type="flex"  justify="space-between"  :style="{height:contentHeight-30+'px'}" class="code-row-bg">
          <Col class="board-item" span="12" style="padding: 0 5px 5px 0;" :style="{height:(contentHeight-40)/2+'px'}">
            <div id="dash-board-user" class="board-item-card">

            </div>
          </Col>
          <Col class="board-item" span="12" style="padding: 0 5px 5px 5px;" :style="{height:(contentHeight-40)/2+'px'}">
            <div id="dash-board-pipeline" class="board-item-card">

            </div>
          </Col>
          <Col class="board-item" span="12" style="padding: 5px 5px 0 0;" :style="{height:(contentHeight-40)/2+'px'}">
            <div id="dash-board-fly-task" class="board-item-card">

            </div>
          </Col>
          <Col class="board-item" span="12" style="padding: 5px 5px 0 5px;" :style="{height:(contentHeight-40)/2+'px'}">
            <div id="dash-board-danger" class="board-item-card">

            </div>
          </Col>
        </Row>
      </Col>
      <Col class="board-item" :style="{height:contentHeight-30+'px',paddingLeft: '5px'}" span="12">
        <div id="dash-board-infrastructure" class="board-item-card">

        </div>
      </Col>
    </Row>
  </div>
</template>
<script>

import {mapGetters, mapState} from "vuex"
import axios from "axios";
import * as echarts from 'echarts';
import 'echarts-gl';

export default {
  name: "Dashboard",
  computed: {
    ...mapState(["url", "host","realSideWidth","projectMap"]),
    ...mapGetters(["contentWidth","contentHeight"]),
  },
  watch: {
    realSideWidth: function () {

    }
  },
  data(){
    return {
      userTotal: 0,
      fileTotal: 0,
      pipelineTotal: 0,
      flyTaskTotal: 0,
      dangerTotal: 0,
      infrastructureTotal: 0,
      pileCardTotal: 0,
      generalFacilitiesTotal: 0,
      constructionUnitsTotal: 0,
      highConsequenceAreasTotal: 0,
      cameraTotal: 0,
    }
  },
  mounted: function() {
    let self = this;
    self.userTotal = 0;
    self.fileTotal = 0;
    self.pipelineTotal = 0;
    self.flyTaskTotal = 0;
    self.dangerTotal = 0;
    self.infrastructureTotal = 0;
    axios.get(self.url.statistics_summary).then(function (response) {
      let {danger,file,flyTask,infrastructure,pipeline,user} = response.data.content;
      let userData = [];
      let fileList = [];
      let pipelineList = [];
      let flyTaskList1 = [];
      let flyTaskList2 = [];
      let dangerList1 = [];
      let dangerList2 = [];
      let infrastructureSet1 = new Set();
      let infrastructureList2 = [];
      let infrastructureList3 = [];
      for (let item of user){
        let {projectId,count} = item;
        self.userTotal += count;
        if (projectId !== 1){
          userData.push({name:self.projectMap.get(projectId),value:count});
        }else {
          userData.push({name:"超级管理",value:count});
        }
      }
      for (let item of file){
        let {projectId,count} = item;
        self.fileTotal += count;
        fileList.push({name:self.projectMap.get(projectId),value:count});
      }
      for (let item of pipeline){
        let {projectId,count} = item;
        self.pipelineTotal += count;
        pipelineList.push({name:self.projectMap.get(projectId),value:count});
      }
      for (let item of flyTask){
        let {projectId,count} = item;
        self.flyTaskTotal += count;
        flyTaskList1.push(self.projectMap.get(projectId));
        flyTaskList2.push(count);
      }
      for (let item of danger){
        let {projectId,count} = item;
        self.dangerTotal += count;
        dangerList1.push(self.projectMap.get(projectId));
        dangerList2.push(count);
      }
      for (let item in infrastructure){
        switch (item.toString()){
          case 'pileCard':infrastructureList2.push("桩牌");break;
          case 'generalFacilities':infrastructureList2.push("通用设施");break;
          case 'constructionUnits':infrastructureList2.push("施工作业区");break;
          case 'highConsequenceAreas':infrastructureList2.push("高后果区");break;
          case 'camera':infrastructureList2.push("监控");break;
          default:{}
        }
      }
      for (let item in infrastructure){
        for (let item1 of infrastructure[item]){
          let {projectId} = item1;
          infrastructureSet1.add(self.projectMap.get(projectId));
        }
      }
      let infrastructureList1 = Array.from(infrastructureSet1);

      for (let item in infrastructure){
        let type = 0;
        switch (item.toString()){
          case 'pileCard':type = infrastructureList2.indexOf("桩牌");break;
          case 'generalFacilities':type = infrastructureList2.indexOf("通用设施");break;
          case 'constructionUnits':type = infrastructureList2.indexOf("施工作业区");break;
          case 'highConsequenceAreas':type = infrastructureList2.indexOf("高后果区");break;
          case 'camera':type = infrastructureList2.indexOf("监控");break;
          default:{}
        }
        for (let item1 of infrastructure[item]){
          let {projectId,count} = item1;
          let projectIdIndex = infrastructureList1.indexOf(self.projectMap.get(projectId));
          infrastructureList3.push([type,projectIdIndex,count])
          self.infrastructureTotal += count;
        }
      }
      self.dashBoardUserInit(userData);
      self.dashBoardPipelineInit(pipelineList);
      self.dashBoardFlyTaskInit(flyTaskList1,flyTaskList2);
      self.dashBoardDangerInit(dangerList1,dangerList2);
      self.dashBoardInfrastructureInit(infrastructureList1,infrastructureList2,infrastructureList3);
    })
  },
  methods:{
    dashBoardInfrastructureInit(dataList1,dataList2,dataList3){
      let self = this;
      let myChart = echarts.init(document.getElementById("dash-board-infrastructure"));
      let option = {
        title: {
          text: '基础信息统计',
          subtext: this.infrastructureTotal,
          textStyle: {
            color: "#5cadff",
            fontSize: '13px',
          },
          left: 5,
          top: 5,
          link: '#/admin/infrastructure',
          target:'self'
        },
        tooltip: {
          formatter: function (params) {
            return `${dataList1[params.value[0]]} ${dataList2[params.value[1]]}数量: ${params.value[2]}`;
          }
        },
        visualMap: {
          max: 20,
          inRange: {
            color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
          }
        },
        xAxis3D: {
          type: 'category',
          nameLocation: 'start',
          data: dataList1,
          name: '项目',
          color: '#ff6700'
        },
        yAxis3D: {
          type: 'category',
          data: dataList2,
          name: '数据类型'
        },
        zAxis3D: {
          type: 'value',
          top: 20,
          name: '设施数量'
        },
        grid3D: {
          boxWidth: 70,
          boxDepth: 70,
          viewControl: {
            projection: 'orthographic'
          },
          light: {
            main: {
              intensity: 1.2,
              shadow: true
            },
            ambient: {
              intensity: 0.3
            }
          }
        },
        series: [{
          name: '基础设施',
          type: 'bar3D',
          data: dataList3.map(function (item) {
            return {
              value: [item[1], item[0], item[2]],
            }
          }),
          shading: 'lambert',
          label: {
            fontSize: 14,
            borderWidth: 1
          },
          itemStyle: {
            normal: {
              label: {
                show: true, //开启显示
                position: 'top', //在上方显示
              }
            }
          },
          emphasis: {
            label: {
              fontSize: 20,
              color: '#F60'
            },
            itemStyle: {
              color: '#F60'
            }
          }
        }]
      }

      if (option && typeof option === 'object') {
        myChart.setOption(option);
      }
    },
    dashBoardDangerInit(dataList1,dataList2){
      let myChart = echarts.init(document.getElementById("dash-board-danger"));
      let option = {
        title: {
          text: '险情统计['+this.dangerTotal+']',
          textStyle: {
            color: "#5cadff",
            fontSize: '13px',
          },
          left: 5,
          top: 5,
          link: '#/admin/danger',
          target:'self'
        },
        xAxis: {
          type: 'category',
          nameRotate: 30,
          axisLabel: {
            interval:0,
            rotate:40
          },
          data: dataList1
        },
        yAxis: {
          type: 'value'
        },
        grid: {
          left: '15%',
          bottom:'20%'
        },
        series: [{
          data: dataList2,
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          },
          itemStyle: {
            normal: {
              label: {
                show: true, //开启显示
                position: 'top', //在上方显示
              }
            }
          },
        }]
      };
      if (option && typeof option === 'object') {
        myChart.setOption(option);
      }
    },
    dashBoardFlyTaskInit(dataList1,dataList2){
      let myChart = echarts.init(document.getElementById("dash-board-fly-task"));
      let option = {
        title: {
          text: '任务统计['+this.flyTaskTotal+']',
          textStyle: {
            color: "#5cadff",
            fontSize: '13px',
          },
          left: 5,
          top: 5,
          link: '#/admin/flyTask',
          target:'self'
        },
        grid: {
          left: '15%',
          bottom:'20%'
        },
        xAxis: {
          type: 'category',
          nameRotate: 30,
          axisLabel: {
            interval:0,
            rotate:40
          },
          data: dataList1
        },
        yAxis: {
          type: 'value',
          left: 35,
          bottom:'15%'
        },
        series: [{

          data: dataList2,
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          },
          itemStyle: {
            normal: {
              label: {
                show: true, //开启显示
                position: 'top', //在上方显示
              }
            }
          },
        }]
      };
      if (option && typeof option === 'object') {
        myChart.setOption(option);
      }
    },
    dashBoardPipelineInit(dataList){
      let myChart = echarts.init(document.getElementById("dash-board-pipeline"));
      let option = {
        title: {
          text: '管线统计',
          subtext: this.pipelineTotal,
          textStyle: {
            color: "#5cadff",
            fontSize: '13px',
          },
          subtextStyle: {
            color: "#5cadff",
            fontSize: '13px',
          },
          x:'center',
          y:'center',
          link: '#/admin/pipeline',
          target:'self'
        },
        tooltip: {
          trigger: 'item'
        },
        label: {
          normal :{
            show: true,
            position:'center',
            textStyle:{
              fontSize:30,
              padding: [-100,0,0,0],
            },
            formatter:'10000'
          },
          position: 'center',
          show:true,
        },
        series: [
          {
            name: '管线数量',
            type: 'pie',
            radius: ['30%', '50%'],
            avoidLabelOverlap: true,
            itemStyle: {
              borderRadius: 3,
              normal: {
                label: {
                  show: true,
                  formatter: '{b}'
                }
              }
            },
            label: {
              show: true
            },
            data: dataList
          }
        ]
      };
      if (option && typeof option === 'object') {
        myChart.setOption(option);
      }
    },
    dashBoardUserInit(dataList){
      let myChart = echarts.init(document.getElementById("dash-board-user"));
      let option = {
        title: {
          text: '用户统计',
          subtext: this.userTotal,
          textStyle: {
            color: "#5cadff",
            fontSize: '13px',
          },
          subtextStyle: {
            color: "#5cadff",
            fontSize: '13px',
          },
          x:'center',
          y:'center',
          link: '#/admin/user',
          target:'self'
        },
        tooltip: {
          trigger: 'item'
        },
        label: {
          normal :{
            show: true,
            position:'center',
            textStyle:{
              fontSize:30,
              padding: [-100,0,0,0],
            },
            formatter:'10000'
          },
          position: 'center',
          show:true,
        },
        series: [
          {
            name: '用户数量',
            type: 'pie',
            radius: ['30%', '50%'],
            avoidLabelOverlap: true,
            itemStyle: {
              borderRadius: 3,
              normal: {
                label: {
                  show: true,
                  formatter: '{b}'
                }
              }
            },
            label: {
              show: true
            },
            data: dataList
          }
        ]
      };
      if (option && typeof option === 'object') {
        myChart.setOption(option);
      }
    }
  }
}
</script>

<style scoped>
#content{
  background: #FFFFFF;
  padding: 15px;
}
.board-item{
  height: inherit;
}
.board-item-card{
  height: inherit;
  background: #7e84a233;
  border: 1px solid #ffffff30;
  display: block;
  border-radius: 4px;
  font-size: 14px;
  position: relative;
  transition: all .2s ease-in-out;
}
.board-item-card:hover {
  box-shadow: 0 1px 6px rgba(0,0,0,.2);
  border-color: #eee;
}
</style>
